<template>
  <div id="admin_device">
    <CommonTable
      :query-api="'/equipment/hospAdmin/page'"
      :query-params="param"
      :columns="columns"
      @search-finish="searchFinish"
      ref="deviceRef"
      name="admin_device_table"
    >
      <template #tableSearchForm>
        <a-form id="internal_drawer_form_model" :model="formInfo" layout="inline">
          <a-form-item label="医院">
            <a-select
              v-model:value="formInfo.hospId"
              style="width: 240px"
              popupClassName="common_select_dropdown"
              @change="changeHosp"
              allowClear
              show-search
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="item in hospList"
                :key="item.id"
                :value="item.id"
                :desc="item.desc"
                :code="item.code"
                >{{ item.desc }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="设备">
            <a-select
              v-model:value="formInfo.equipmentId"
              style="width: 240px"
              popupClassName="common_select_dropdown"
              allowClear
              show-search
              :filter-option="filterOption"
            >
              <a-select-option
                v-for="item in deviceList"
                :key="item.id"
                :value="item.id"
                :desc="item.desc"
                :model="item.model"
                >{{ item.desc }}-型号:{{ item.model }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="审核状态">
            <a-select
              v-model:value="formInfo.verified"
              style="width: 120px"
              popupClassName="common_select_dropdown"
            >
              <a-select-option :value="''" :key="''">全部</a-select-option>
              <a-select-option :value="'false'" :key="'false'">未审核</a-select-option>
              <a-select-option :value="'true'" :key="'true'">已审核</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item class="filter_footer" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
            <a-space>
              <a-button type="primary" @click="onSerach" :loading="loading" :disabled="loading"
                >查询</a-button
              >
              <a-button @click="resetForm" :loading="loading" :disabled="loading">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </template>
      <template #otherAction="{ record }">
        <a-button size="small" @click="enterMark(record)">审核</a-button>
      </template>
    </CommonTable>
  </div>
</template>
<script lang="ts" setup>
import CommonTable from '@/components/common_table/index.vue'
import type { TColumn } from '@/components/common_table/type'
import { getAllHospList, getEquipList } from '@/axios/api/options_api'
import { filterOption } from '@/utils/filter_util'
import type { OptionsType, ListType } from '@/axios/api/type'
import { ref, h, onMounted, watch, onBeforeUnmount } from 'vue'
import type { FromType } from './type.ts'
import { cloneDeep, find } from 'lodash-es'
import { FileUnknownOutlined } from '@ant-design/icons-vue'
const deviceRef = ref()
const columns = ref<TColumn[]>([
  {
    title: '设备名',
    fixed: 'left',
    dataIndex: 'name',
    key: 'name',
    align: 'left',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '设备型号',
    dataIndex: 'model',
    key: 'model',
    align: 'left',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '所属医院',
    dataIndex: 'hospName',
    key: 'hospName',
    align: 'left',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    dataIndex: 'configuration',
    key: 'configuration',
    title: '设备配置',
    align: 'left',
    width: 180,
    ellipsis: true,
    customRender: ({ text }) => {
      if (text) {
        let msgs = text.replace(/<[^>]*>/g, '') //去除HTML Tag
        msgs = msgs.replace(/[|]*\n/, '') //去除行尾空格
        msgs = msgs.replace(/&nbsp;/gi, '  ') //去掉nbsp
        return msgs
      } else {
        return ''
      }
    },
    showCol: true
  },
  {
    title: '检测报告',
    dataIndex: 'examReportUrlList',
    key: 'examReportUrlList',
    align: 'center',
    width: 180,
    showCol: true,
    customRender: ({ text, record }) => {
      if (text) {
        return h(
          'span',
          {
            onClick: () => previewFile(record),
            style: {
              cursor: 'pointer'
            }
          },
          [h(FileUnknownOutlined), '(点击查看)']
        )
      } else {
        return h(
          'span',
          {
            onClick: () => previewFile(record),
            style: {
              cursor: 'pointer'
            }
          },
          [h(FileUnknownOutlined), '(点击查看)']
        )
      }
    }
  },
  {
    title: '采购时间',
    dataIndex: 'buyTime',
    key: 'buyTime',
    align: 'center',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '审核过期时间',
    dataIndex: 'expireDate',
    key: 'expireDate',
    align: 'center',
    width: 180,
    ellipsis: true,
    showCol: true
  },
  {
    title: '审核过期剩余时长',
    key: 'expireDay',
    dataIndex: 'expireDay',
    width: 180,
    ellipsis: true,
    fixed: 'right',
    customRender: ({ text }) => {
      if (text < 0) {
        return h(
          'span',
          {
            style: {
              color: 'red'
            }
          },
          `已过期${Math.abs(text)}天`
        )
      } else {
        return h(
          'span',
          {
            style: {
              color: 'green'
            }
          },
          `${text}天`
        )
      }
    },
    showCol: true
  },
  {
    fixed: 'right',
    title: '操作',
    width: 190,
    key: 'action',
    align: 'center',
    showCol: true
  }
])
const formInfo = ref<FromType>({
  equipmentId: '',
  hospCode: '',
  hospId: '',
  verified: ''
})
const param = ref<FromType>({
  ...cloneDeep(formInfo.value),
  verified: formInfo.value.verified ? JSON.parse(formInfo.value.verified.toString()) : ''
})
const loading = ref(false)
const hospList = ref<OptionsType[]>([])
const deviceList = ref<OptionsType[]>([])
async function getOptionList() {
  const hospInfo = await getAllHospList().catch(() => {
    return {
      code: 400,
      data: []
    }
  })
  hospList.value = hospInfo.data
  onSerach()
}
function previewFile(record: any) {
  console.log('%c [ record ]-240', 'font-size:13px; background:pink; color:#bf2c9f;', record)
}
function changeHosp(val: any) {
  if (val) {
    formInfo.value.hospCode =
      find(hospList.value, (f) => {
        return f.id === val
      })?.code || ''
    getDeviceOption()
  } else {
    formInfo.value.hospCode = ''
    formInfo.value.equipmentId = ''
    deviceList.value = []
  }
}
function getDeviceOption() {
  getEquipList({ hospCode: formInfo.value.hospCode || '' }).then((res) => {
    deviceList.value = res.data || []
  })
}

function enterMark(record: any) {
  console.log('%c [ record ]-555', 'font-size:13px; background:pink; color:#bf2c9f;', record)
}
const stopFormWatcher = watch(
  formInfo,
  () => {
    param.value = cloneDeep(formInfo.value)
    param.value.verified = formInfo.value.verified
      ? JSON.parse(formInfo.value.verified.toString())
      : ''
  },
  {
    deep: true
  }
)
function searchFinish() {
  loading.value = false
}
function resetForm() {
  formInfo.value = {
    equipmentId: '',
    hospCode: '',
    hospId: '',
    verified: ''
  }
  param.value = {
    equipmentId: '',
    hospCode: '',
    hospId: '',
    verified: ''
  }
  onSerach()
}
function onSerach() {
  if (deviceRef.value) {
    deviceRef.value.getPage(param.value)
  }
}
onMounted(() => {
  getOptionList()
})
onBeforeUnmount(() => {
  stopFormWatcher()
})
</script>
<style lang="scss" scoped>
#admin_device {
  @include w-h-cover();
}
</style>
